<script setup>
import { onMounted, ref } from 'vue'
import { deleteCategory, queryCategories } from '@/service/category.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import CategoryAddDialog from '@/pages/Category/components/CategoryAddDialog.vue'
import CategoryUpdateDialog from '@/pages/Category/components/CategoryUpdateDialog.vue'
import { deleteHotSaleRankingItem } from '@/service/hot-sales-ranking.js'
const categoryList = ref([])
const categoryTableRef = ref()
async function loadData() {
  const res = await queryCategories()
  categoryList.value = res.data
}
onMounted(() => {
  loadData()
})
const categoryAddDialogRef = ref()
const categoryUpdateDialogRef = ref()

function addNewCategory() {
  categoryAddDialogRef.value.showModal = true
}
function onTapUpdateButton(row) {
  categoryUpdateDialogRef.value.categoryForm.categoryId = row.id
  categoryUpdateDialogRef.value.categoryForm.categoryName = row.name
  categoryUpdateDialogRef.value.categoryForm.categoryImage = row.imageUrl
  categoryUpdateDialogRef.value.categoryForm.categoryStatus = row.status
  categoryUpdateDialogRef.value.categoryForm.categoryLevel = row.level
  categoryUpdateDialogRef.value.categoryForm.categoryWeight = row.sort
  categoryUpdateDialogRef.value.categoryForm.parentId = row.level === 1 ? null : row.parentId
  categoryUpdateDialogRef.value.showModal = true
}
function onTapDeleteButton(row) {
  ElMessageBox.confirm(
    `确定删除分类：<span style="color: red">${row.name}</span>?<br>  此操作将会同步清空小程序中热销与首页推荐的相关分类信息`,
    '信息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: true, // 允许内容使用 HTML 字符串
    }
  )
    .then(async () => {
      await deleteCategory(row.id)
      ElMessage({
        type: 'success',
        message: '成功删除该分类',
      })
      await loadData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<template>
  <div class="category">
    <h3>分类管理</h3>
    <div style="margin: 10px 0; width: 100%; text-align: right">
      <el-button style="margin-left: auto" type="primary" @click="addNewCategory">添加分类</el-button>
    </div>
    <el-table
      ref="categoryTableRef"
      :data="categoryList"
      :default-expand-all="true"
      :header-cell-style="() => ({ background: '#eef1f6', color: '#606266' })"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="width: 100%"
    >
      <el-table-column align="left" header-align="center" label="分类名称">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分类级别">
        <template #default="scope">
          <el-tag v-if="scope.row.level === 1" type="primary">一级分类</el-tag>
          <el-tag v-else-if="scope.row.level === 2" type="success">二级分类</el-tag>
          <el-tag v-else type="warning">三级分类</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分类图片">
        <template #default="scope">
          <el-image v-if="scope.row.imageUrl" :src="scope.row.imageUrl" style="width: 60px; height: 60px"> </el-image>
          <div v-else style="line-height: 60px">无图片</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序">
        <template #default="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">展示中</el-tag>
          <el-tag v-else type="danger">隐藏中</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template #default="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="onTapUpdateButton(scope.row)">修改</el-button>
          <el-button type="danger" @click="onTapDeleteButton(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <category-add-dialog ref="categoryAddDialogRef" @update="loadData"></category-add-dialog>
  <category-update-dialog ref="categoryUpdateDialogRef" @update="loadData"></category-update-dialog>
</template>

<style lang="scss" scoped>
.category {
  background-color: #fff;
  padding: 24px;
}
</style>
